<template>
  <div>
    <div>
      <p-button type="primary" @click="showModal()">新增</p-button>
    </div>
    <p-table
      :columns="columns"
      :dataSource="dataSource"
      :pagination="pagination"
      :scroll="{x: 1200}"
       class="produce-exception-rule__table mt20"
      row-key="id"
      size="middle"
      bordered
    >
      <template slot="exceptionHandle" slot-scope="text, record">

      </template>
      <template slot="approvalPlatform" slot-scope="text, record">
        
      </template>
      <template slot="action" slot-scope="text, record">
        <a href="javascript:;" @click="showModal(record)">编辑</a>
        <p-popconfirm title="确定要删除吗？" @confirm="deleteItem(record.id)">
          <a href="javascript:;" class="ml10" style="color: red;">删除</a>
        </p-popconfirm>
      </template>
    </p-table>

    <add
      v-model="visible"
      :options="options"
      :type-options="typeOptions"
      :step-options="stepOptions"
      :push-type-options="pushTypeOptions"
      @success="getData"
    />
  </div>
</template>

<script>
import { getAction, deleteAction } from '@/api/manage'
import { ajaxGetDictItems } from '@/api/api'
import { filterDictText } from '@/components/dict/JDictSelectUtil'

export default {
  components: {
    Add: () => import('./add'),
  },
  data() {
    return {
      dataSource: [],
      loading: false,
      pagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
        onChange: current => {
          this.pagination.current = current
          this.getData()
        },
        onShowSizeChange: (current, pageSize) => {
          this.pagination.pageSize = pageSize
          this.pagination.current = 1
          this.getData()
        }
      },
      columns: [
        {
          title: '序号',
          dataIndex: 'rowIndex',
          align: 'center',
          width: 60,
          fixed: 'left',
          customRender(text, record, index) {
            return index + 1
          }
        },
        {
          title: '异常类型',
          dataIndex: 'exceptionType',
          align: 'center',
          width: 80,
          fixed: 'left',
          customRender: text => this.formatExceptionType(text)
        },
        {
          title: '异常步骤',
          dataIndex: 'exceptionStep',
          align: 'center',
          width: 80,
          customRender: text => this.formatExceptionStep(text)
        },
        {
          title: '车间',
          dataIndex: 'workshop',
          align: 'center',
          width: 110,
        },
        {
          title: '通知部门',
          dataIndex: 'notifyDepartName',
          align: 'center',
          width: 110,
        },
        {
          title: '通知人员',
          dataIndex: 'exceptionHandle',
          align: 'center',
          scopedSlots: {
            customRender: 'exceptionHandle'
          }
        },
        {
          title: '推送方式',
          dataIndex: 'pushType',
          align: 'center',
          width: 100,
          customRender: text => this.formatPushType(text)
        },
        {
          title: '是否升级',
          dataIndex: 'exceptionUpgrade',
          align: 'center',
          width: 80,
          customRender: this.renderColumn
        },
        {
          title: '异常升级时间',
          dataIndex: 'exceptionUpgradeTime',
          align: 'center',
          width: 120,
        },
        {
          title: '异常升级有效时段',
          dataIndex: 'exceptionUpgradeEffectTime',
          align: 'center',
          width: 120,
        },
        {
          title: '异常升级推送人员',
          dataIndex: 'approvalPlatform',
          align: 'center',
          scopedSlots: {
            customRender: 'approvalPlatform'
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 80,
          fixed: 'right',
          scopedSlots: {
            customRender: 'action'
          }
        }
      ],
      typeOptions: [],
      stepOptions: [],
      pushTypeOptions: [],
      options: {},
      visible: false
    }
  },
  computed: {
    items() {
      return this.typeOptions.filter(item => {
        return !this.dataSource.find(one => item.value === one.exceptionType)
      })
    }
  },
  created() {
    this.getTypeOptions()
    this.getStepOptions()
    this.getPushTypeOptions()
    this.getData()
  },
  methods: {
    getTypeOptions() {
      ajaxGetDictItems('mes_exception_types').then(res => {
        this.typeOptions = res.data || []
      })
    },
    getStepOptions() {
      ajaxGetDictItems('mes_exception_push_step').then(res => {
        this.stepOptions = res.data || []
      })
    },
    getPushTypeOptions() {
      ajaxGetDictItems('mes_msg_push_type').then(res => {
        this.pushTypeOptions = res.data || []
      })
    },
    getData() {
      this.loading = true
      getAction('/mes-manufacture/mesMfProductExceptionPushSet/list').then(res => {
        this.dataSource = res.data.records || []
        this.pagination.total = res.data.total || 0
        this.loading = false
      })
    },
    formatExceptionType(text) {
      return filterDictText(this.typeOptions, text)
    },
    formatExceptionStep(text) {
      return filterDictText(this.stepOptions, text)
    },
    formatPushType(text) {
      return filterDictText(this.pushTypeOptions, text)
    },
    renderColumn(text) {
      const data = {
        props: {
          checked: !!text
        }
      }
      return <p-switch {...data} />
    },
    showModal(item) {
      this.options = item || null
      this.visible = true
    },
    deleteItem(id) {
      deleteAction(`/mes-manufacture/mesMfProductExceptionRule/${id}`).then(res => {
        if (res.data) {
          this.$message.success('删除成功')
          this.getData()
        } else {
          this.$message.warning(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="less">
.produce-exception-rule {
  &__table {
    .poros-switch {
      pointer-events: none;
    }
  }
}
</style>